<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f8f9fc;
        }
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stats-number {
            font-size: 32px;
            font-weight: bold;
            color: #4e73df;
            margin: 10px 0;
        }
        .stats-label {
            color: #858796;
            font-size: 14px;
        }
        .search-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .data-table {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">模型总数</div>
                    <div class="stats-number">112</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">预测任务数</div>
                    <div class="stats-number">126</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">用户与专家</div>
                    <div class="stats-number">113</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">今日预测数</div>
                    <div class="stats-number">110</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">通知预测数</div>
                    <div class="stats-number">119</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-label">成功预测数</div>
                    <div class="stats-number">132</div>
                </div>
            </div>
        </div>

        <!-- 搜索表单 -->
        <div class="search-form">
            <div class="row g-3">
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="操作记录ID">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="操作人员">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="操作时间">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="操作内容">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="操作结果">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100">搜索</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-success w-100">新增</button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>操作记录ID</th>
                        <th>操作人员</th>
                        <th>操作时间</th>
                        <th>操作状态</th>
                        <th>操作内容</th>
                        <th>操作结果</th>
                        <th>操作备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>OP003</td>
                        <td>tech03</td>
                        <td>2025年07月25日 05:20:00</td>
                        <td>成功</td>
                        <td>系统数据备份</td>
                        <td>完整数据备份完成，不影响系统运行</td>
                        <td>定期数据备份</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>OP002</td>
                        <td>user02</td>
                        <td>2025年05月20日 14:45:00</td>
                        <td>成功</td>
                        <td>数据库优化</td>
                        <td>数据库性能优化完成</td>
                        <td>例行维护</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>OP001</td>
                        <td>admin01</td>
                        <td>2025年03月15日 10:30:00</td>
                        <td>成功</td>
                        <td>导入500条测试数据</td>
                        <td>数据导入完成</td>
                        <td>无特殊情况</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div>共 3 条</div>
                <div class="d-flex align-items-center">
                    <ul class="pagination mb-0">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                    <select class="form-select ms-2" style="width: auto;">
                        <option>5 条/页</option>
                        <option>10 条/页</option>
                        <option>20 条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 在表格后面、</body>前添加以下代码 -->
<script src="js/dataHandler.js"></script>
<script>
    // 模拟系统管理数据
    const mockSystemData = Array.from({length: 140}, (_, index) => ({
        id: index + 1,
        username: `user${String(index + 1).padStart(3, '0')}`,
        role: ['管理员', '操作员', '审核员', '访客'][Math.floor(Math.random() * 4)],
        department: ['技术部', '法务部', '运营部', '客服部'][Math.floor(Math.random() * 4)],
        lastLogin: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toLocaleString(),
        loginIP: `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
        status: ['正常', '禁用', '待审核'][Math.floor(Math.random() * 3)],
        createTime: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toLocaleDateString(),
        permissions: ['数据查看', '数据编辑', '系统管理', '用户管理'][Math.floor(Math.random() * 4)],
        remark: ['系统管理员', '普通用户', '临时账号'][Math.floor(Math.random() * 3)]
    }));

    const dataHandler = new DataHandler(mockSystemData);

    // 渲染表格数据
    function renderTable() {
        const {data, total, currentPage, totalPages} = dataHandler.getPageData();
        const tbody = document.querySelector('tbody');
        tbody.innerHTML = data.map(item => `
            <tr>
                <td>${item.id}</td>
                <td>${item.username}</td>
                <td>${item.role}</td>
                <td>${item.department}</td>
                <td>${item.lastLogin}</td>
                <td>${item.loginIP}</td>
                <td>
                    <span class="badge ${
                        item.status === '正常' ? 'bg-success' :
                        item.status === '禁用' ? 'bg-danger' : 'bg-warning'
                    }">${item.status}</span>
                </td>
                <td>${item.createTime}</td>
                <td>${item.permissions}</td>
                <td>${item.remark}</td>
                <td>
                    <button class="btn btn-sm btn-primary" onclick="editItem(${item.id})">编辑</button>
                    <button class="btn btn-sm btn-warning" onclick="deleteItem(${item.id})">删除</button>
                </td>
            </tr>
        `).join('');

        // 更新分页信息
        document.querySelector('.pagination').innerHTML = `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>
            </li>
            ${Array.from({length: totalPages}, (_, i) => i + 1).map(page => `
                <li class="page-item ${page === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${page})">${page}</a>
                </li>
            `).join('')}
            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>
            </li>
        `;

        document.querySelector('.d-flex > div:first-child').textContent = `共 ${total} 条`;
    }

    // 分页切换
    function changePage(page) {
        if (page < 1 || page > Math.ceil(dataHandler.data.length / dataHandler.pageSize)) return;
        dataHandler.setPage(page);
        renderTable();
    }

    // 删除数据
    function deleteItem(id) {
        if (confirm('确定要删除这条记录吗？')) {
            dataHandler.delete(id);
            renderTable();
        }
    }

    // 编辑数据
    function editItem(id) {
        const item = dataHandler.data.find(item => item.id === id);
        const newStatus = prompt('请输入新的状态（正常/禁用/待审核）：', item.status);
        if (newStatus !== null) {
            dataHandler.update(id, {
                status: newStatus,
                lastLogin: new Date().toLocaleString(),
                remark: newStatus === '禁用' ? '管理员禁用' : item.remark
            });
            renderTable();
        }
    }

    // 添加数据
    document.querySelector('button.btn-outline-secondary').onclick = function() {
        const newItem = {
            username: `user${String(dataHandler.data.length + 1).padStart(3, '0')}`,
            role: '访客',
            department: '待分配',
            lastLogin: '-',
            loginIP: '-',
            status: '待审核',
            createTime: new Date().toLocaleDateString(),
            permissions: '数据查看',
            remark: '新建用户'
        };
        dataHandler.add(newItem);
        renderTable();
    };

    // 初始化渲染
    renderTable();

    // 每页显示条数变化处理
    document.querySelector('.form-select').addEventListener('change', function(e) {
        dataHandler.setPageSize(parseInt(e.target.value));
        renderTable();
    });
</script>
</html>